<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in 10">
        <img src="../../../assets/images/link_icon.png" alt="icon" />
        <span>湖北上智职业培训学校</span>
      </div>
    </div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev">
      <img
        class="swiper-button-prev-img"
        src="../../../assets/images/switch_left.png"
        alt="pre"
      />
    </div>
    <div class="swiper-button-next">
      <img
        class="swiper-button-next-img"
        src="../../../assets/images/switch_right.png"
        alt="next"
      />
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  data() {
    return {
      mySwiper: {},
    };
  },
  methods: {
    tabClick(index) {
      this.nowIndex = index;
      this.mySwiper.slideTo(index, 300, false);
    },
  },
  mounted() {
    let that = this;
    this.mySwiper = new Swiper(".swiper-container", {
      pagination: ".swiper-pagination",
      slidesPerView: 5,
      paginationClickable: true,
      spaceBetween: 10,
      // centeredSlides: true,
      autoplay: false,
      loop: true,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next-img",
        prevEl: ".swiper-button-prev-img",
      },
      autoplayDisableOnInteraction: false, //解决拖动之后不能自动轮播
      preventLinksPropagation: false, // 阻止点击事件冒泡
    });
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 1200px;
  box-sizing: border-box;
  height: 120px;
  padding-left: 76px;
  padding-right: 76px;
  margin-bottom: 108px;
  .swiper-wrapper {
    //width: 1050px;
    //left: 50% !important;
    //transform: translateX(-50%) !important;
    .swiper-slide {
      box-sizing: border-box;
      padding-top: 20px;
      padding-bottom: 20px;
      img {
        display: block;
        width: 46px;
        height: 46px;
        margin: 0 auto;
      }
      span {
        display: block;
        text-align: center;
        height: 13px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        padding-top: 10px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
  .swiper-button-next:after,
  .swiper-container-rtl {
    content: "next";
    display: none;
  }
  .swiper-button-prev:after,
  .swiper-container-rtl {
    content: "prev";
    display: none;
  }
}
</style>
